<template>
  <!--  标识范围 -->
  <div id="app-container">
    <el-form label-width="130px">
      <el-form-item label="书名">
        <el-col :span="5">
          <el-input v-model="book.bookName"/>
        </el-col>
      </el-form-item>
      <el-form-item label="作者">
        <el-col :span="5">
          <el-input v-model="book.author"/>
        </el-col>
      </el-form-item>
      <!-- TODO 分类 -->
      <el-form-item label="一级分类">
        <el-select @change="getSecondCategoryList" v-model="book.isFirstType" placeholder="请选择">
          <el-option
            v-for="item in firstCategoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select  v-model="book.seconder" placeholder="请选择">
          <el-option
            v-for="item in secondCategoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="授权开始时间">
        <el-date-picker
          v-model="book.empowerCreate"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="授权结束时间">
        <el-date-picker
          v-model="book.empowerEnd"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="连载">
        <el-select v-model="book.isSerial" clearable placeholder="请选择">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </el-form-item>
      <el-form-item label="全本收费">
        <el-select v-model="book.isCharge" clearable placeholder="请选择">
          <el-option :value="1" label="收费"/>
          <el-option :value="0" label="免费"/>
        </el-select>
      </el-form-item>
      <el-form-item label="原创">
        <el-select v-model="book.isOriginal" clearable placeholder="请选择">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="book.reason" :rows="10" type="textarea"/>
      </el-form-item>
      <!-- TODO 书封 -->
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="createBook()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import book from "@/api/cms/book";
  import category from "@/api/cms/category";
  export default {
      data() {
        return {
          book: {
            bookName:'',
            author:'',
            empowerCreate:undefined,
            empowerEnd:undefined,
            reason:'',
            isFirstType:'',
            isCharge:'',
            isSerial:'',
            seconder:''
          }, // 添加的书籍的对象
          saveBtnDisabled: false, // 不禁用保存按钮
          BASE_API: process.env.VUE_APP_BASE_API,
          firstCategoryList: [], // ## 一级分类封装集合
          secondCategoryList: [] // ## 二级分类封装集合
        }
      },
    created() { // ## 页面渲染之前执行的方法
      this.getCategoryList()
    },
    methods: {
        getCategoryList() { // ## 获取分类数据
           category.getCategoryList()
                  .then(response => {
                    console.log(response.data.items)
                    this.firstCategoryList = response.data.items
                  })
        },
        createBook() {
          this.saveBtnDisabled = true // 禁用保存按钮
          book.createBook(this.book)
              .then(response => {
                // 保存成功之后的提示信息
                this.$message({
                  type: 'success',
                  message: '添加成功！'
                })
                // 添加成功之后，返回到list页面
                this.$router.push('/cms/book/list')
              })
        },
      getSecondCategoryList(value) { // ## 获取二级分类数据
          // ## 清空二级分类数据
        this.book.seconder = ''
        for (let i = 0; i <this.firstCategoryList.length ; i++) {
          if (value === this.firstCategoryList[i].id) {
            this.secondCategoryList = this.firstCategoryList[i].secondCategoryList
          }
        }
      }
      }
  }
</script>

<style scoped>

</style>
